<template>
  <!-- 专利档案 -->
  <div class="archives-box">
    <div class="nav-wrap">
      <nav v-for="(item, index) in navs" :key="index" class="navs">
        <div class="nav-item" :class="{active: curActive===item.routerName}" @click="toPage(item)">
          <i :class="item.iconClass"></i>
          <span class="label">{{item.label}}</span>
        </div>
      </nav>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navs: [
        {label: '技术价值度', iconClass: 'icon iconfont icon-jishujiazhidu_new', routerName: 'PatentArchivesTechnologyValue'},
        {label: '专利价值度', iconClass: 'icon iconfont icon-zhuanlijiazhidu_new', routerName: 'PatentArchivesPatentValue'},
      ],
      curActive: 0
    }
  },
  methods: {
    init() {
      this.curActive = this.$route.name
    },
    toPage(item) {
      this.$router.push({
        name: item.routerName,
        query: this.$route.query
      })
    }
  },
  watch: {
    '$route'() {
      this.init()
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.archives-box {
  position: relative;
  .nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    color: #646a8e;
    background-color: #2d2e32;
    .navs {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      // justify-content: space-around;
      // width: 800px;
      .nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 30px;
        color: #646a8e;
        &.active {
          color: #fff;
        }
        &:hover {
          color: #fff;
          cursor: pointer;
        }
        .icon {
          width: auto;
          height: auto;
          font-size: 20px;
        }
        span {
          font-size: 14px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>